<script lang="ts" setup>
import type { DataType } from './types';

import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import { Button, message, Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserUsers, postUserUsersStatus } from '#/api/user/users';
import { formatImagesList } from '#/utils';

defineOptions({
  name: 'UserAdminIndex',
});

const router = useRouter();
const routeMeta = router.currentRoute.value.meta;
const viewTitle = routeMeta.title.replace('管理', '');

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入用户ID',
      },
      fieldName: 'user_id',
      label: '用户ID',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入用户名/昵称/邮箱/手机',
      },
      fieldName: 'keyword',
      label: '关键词',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  columns: [
    { field: 'id', title: '编号' },
    { field: 'user_login', title: '用户名' },
    { field: 'user_nickname', title: '昵称' },
    { field: 'avatar', title: '头像', cellRender: { name: 'CellAvatar' } },
    { field: 'user_email', title: '邮箱' },
    { field: 'mobile', title: '手机' },
    {
      field: 'create_time',
      title: '注册时间',
      formatter: 'formatShortDateTime',
    },
    { field: 'last_login_ip', title: '最后登录IP' },
    {
      field: 'last_login_time',
      title: '最后登录时间',
      formatter: 'formatShortDateTime',
    },
    {
      field: 'user_status',
      title: '状态',
      cellRender: { name: 'CellUserStatus' },
    },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ],
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const { data } = await getUserUsers({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
        data.list = formatImagesList(data.list, 'avatar');
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
  formOptions,
});

const onChange = async (row: DataType) => {
  const userStatusObj = { 0: '禁用', 1: '启用', 2: '未验证' };
  const oldstatus = row.user_status;
  const status = [0, 2].includes(row.user_status) ? 1 : 0;
  Modal.confirm({
    title: '系统提示',
    content: `确认要${userStatusObj[status]}吗?`,
    async onOk() {
      try {
        await postUserUsersStatus(row.id, status);
        message.success(`已${userStatusObj[status]}`);
      } catch {
        row.user_status = oldstatus;
      }
    },
    onCancel() {
      row.user_status = oldstatus;
    },
  });
};
</script>

<template>
  <Page auto-content-height>
    <Grid :table-title="`${viewTitle}列表`">
      <template #action="{ row }">
        <Button
          :danger="[0, 2].includes(row.user_status) ? false : true"
          :disabled="row.id === 1 || row.user_type === 1"
          type="primary"
          @click="onChange(row)"
        >
          {{
            row.user_status === 2
              ? '验证'
              : row.user_status === 1
                ? '禁用'
                : '启用'
          }}
        </Button>
      </template>
    </Grid>
  </Page>
</template>
